{extend name="common:base-user" /}

{block name="title"}个人中心 - 天佑二手货{/block}
{block name="css"}
<link rel="stylesheet" href="__STATIC__/css/cropper.min.css" />
{/block}
{block name="page"}auth{/block}

{block name="main"}
<div class="am-container am-margin-top-xl">
    <div class="am-u-lg-3 am-u-md-3">
        <div class="am-u-lg-12 am-u-md-12">
            <img class="am-center" src="{$userinfo['image']}" alt="请添加头像" width="150" height="150" />
            <span class="am-center am-text-center" style="margin-top:2px;">
                <a href="#" class="am-text-center" data-am-modal="{target: '#image-popup'}">修改</a>
            </span>
        </div>
        <div class="am-u-lg-12 am-u-md-12">
        </div>
    </div>
    
    <div class="am-u-lg-9 am-u-md-9">
        <div data-tab-panel-0 class="am-tab-panel am-active">
        <table>
            <tr><td><h5>基本资料</h5></td></tr>
            <tr>
                <td class="am-text-right">用户名：</td>
                <td>{$userinfo['username']}</td>
                <td><a href="#" class="" id="btn-modify-username" data-am-popover="{theme: 'primary', content: '6个月只能修改一次密码', trigger: 'hover focus'}">修改</a></td>
            </tr>
            <tr>
                <td class="am-text-right">邮&nbsp;&nbsp;&nbsp;箱：</td>
                <td>{$userinfo['email']}</td>
                <td></td>
            </tr>
            <tr>
                <td class="am-text-right">校&nbsp;&nbsp;&nbsp;区：</td>
                <td>{$userinfo['area']}</td>
                <td></td>
            </tr>
            <tr>
                <td class="am-text-right">信息保护：</td>
                <td>{$userinfo['protect']}</td>
                <td><a href="#" class="" id="btn-modify-protect">修改</a></td>
            </tr>
            <tr><td><h5>安全设置</h5></td></tr>
            <tr>
                <td><a href="#" id="btn-modify-password">修改密码</a></td>
                <td><a href="#">实名认证</a></td>
            </tr>

        </table>
        </div>
    </div>
</div>
<div>
    <!-- div内均为隐藏内容 -->
    <div class="am-modal am-modal-prompt" tabindex="-1" id="name-prompt">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">修改昵称</div>
            <div class="am-modal-bd">
                <input type="text" class="am-modal-prompt-input" id="new-newname">
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" id="btn-modify-username" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-prompt" tabindex="-1" id="image-popup">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">
                <sapn class="am-popup-title">修改头像</sapn>
                <span data-am-modal-close class="am-close">&times;</span>
            </div>
            <div class="am-u-sm-12">
                <span>图片格式必须为：bmp, jpeg, jpg, jpeg; 不可大于2M</span>
                <div class="am-form-group am-form-file">
                    <button type="button" class="am-btn am-btn-default am-btn-sm">
                        <i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
                    <input type="file" accept=".image,.gif,.jpg,.bmp" name="photofile" id="photofile" />
                </div>
                <div class="am-fl" id="box" style="width:200px;height:200px;">
                    <img src="" id="srcimage" style="max-width:100%;">
                </div>
                <div class="am-fl" style="width:180px;height:180px;margin-left:25px;padding:0px;overflow:hidden;" id="newcro">
                </div>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" id="btn-modify-image" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>
    <div class="am-modal am-modal-prompt" tabindex="-1" id="password-prompt">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">修改密码</div>
            <div class="am-modal-bd">
                <form class="am-form" id="form-modifypassword">
                    <input type="password" class="" name="oldpassword" placeholder="原始密码">
                    <br>
                    <input type="password" class="" name="password" placeholder="新密码">
                    <br>
                    <input type="password" class="" name="repassword" placeholder="重复密码">
                    <br>
                    <div class="am-form-group am-form-icon am-form-feedback am-g-collapse am-cf">
                        <label for="captcha" class="am-u-sm-3 am-form-label">
                            <div id="captcha-img" title="刷新验证码"><img src="{:captcha_src()}" alt="captcha" /></div>
                        </label>
                        <div class="am-u-sm-9">
                            <input type="text" name="captcha" id="captcha" class="am-form-field" placeholder="请输入验证码">
                            <!-- <span class="am-icon-warning"></span> -->
                        </div>
                    </div>
                </form>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" id="btn-modify-password" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-prompt" tabindex="-1" id="protect-prompt">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">设置信息保护级别</div>
            <div class="am-modal-bd">
                <form class="am-form" id="form-setprotect">
                    <select name="protect" data-am-selected="{btnWidth: '6em', btnSize: 'sm'}">
                        <option value="1">不保护</option>
                        <option value="2">一般模式</option>
                        <option value="3">增强模式</option>
                        <option value="4">严格保护</option>
                    </select>
                </form>
                <p class="am-text-left">严格保护：任何情况下不能查看自己的姓名、电话、地址、邮箱；</p>
                <p class="am-text-left">一般：只有登陆后的用户能够查看自己的姓氏、电话、地址、邮箱；
                <p class="am-text-left">增强模式：在一般的基础上，不能查看自己的电话；</p>
                <p class="am-text-left">不保护：所有人都可查看自己的姓氏、地址、邮箱(不包括电话)；</p>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" id="btn-modify-protect" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script type="text/javascript" src="__STATIC__/js/cropper.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn-modify-username').on('click', function() {
        $('#name-prompt').modal({
            relatedTarget: this,
            onConfirm: function(e) {
                var newname = $('#new-newname').val();
                $.get("{:url('user/modifyUserName')}", {
                    "username": newname
                }, function(data) {
                    if (data.code) {
                        location.reload();
                    } else {
                        $alert = $('#am-alert');
                        $alert.find('.content').text(data.msg);
                        $alert.modal('open');
                    }
                });
            }
        });
    });
    $('#btn-modify-password').on('click', function() {
        $('#password-prompt').modal({
            relatedTarget: this,
            onConfirm: function(e) {
                $.ajax({
                    url: "{:url('user/modifyPassword')}",
                    type: 'POST',
                    data: $('#form-modifypassword').serialize(),
                    success: function(data) {
                        console.log(data);
                        $alert = $('#am-alert');
                        $alert.find('.content').text(data.msg);
                        $alert.modal('open');
                        if(data.code) {
                            setTimeout(function() {
                                location.href = data.url;
                            }, data.wait * 1000);
                        } else {
                            $('#captcha-img').click();
                        }
                    }
                })
            }
        });
    });
    $('#btn-modify-protect').on('click', function() {
        $('#protect-prompt').modal({
            relatedTarget: this,
            onConfirm: function(e) {
                $.ajax({
                    url: "{:url('user/setProtect')}",
                    type: 'get',
                    data: $('#form-setprotect').serialize(),
                    success: function(data) {
                        $alert = $('#am-alert');
                        $alert.find('.content').text(data.msg);
                        $alert.modal('open');
                        if(data.code) {
                            location.reload();
                        } else {
                        }
                    }
                })
            }
        });
    });
});

var cropperOptions = {
    aspectRatio: 1 / 1,
    background: 0,
    zoomable: 0,
    preview: '#newcro',
    crop: function(data) {}
};
var $image = $('#srcimage');
$image.cropper(cropperOptions);
//加载本地图片
$('#photofile').on('change', function() {
    var file = this.files[0];
    var url;
    url = URL.createObjectURL(file);
    $('#srcimage').attr('src', url);
    $image.cropper("replace", url);
});

$('#btn-modify-image').on('click', function() {
    var data = $image.cropper('getCroppedCanvas', {
        'width': 300,
        'height': 300
    }).toDataURL();
    $.post("{:url('user/modifyImage')}", {
        "photo": data
    }, function(returndata) {
        if (returndata.code) {
            location.reload();
        } else {
            $alert = $('#am-alert');
            $alert.find('.content').text(returndata.msg);
            $alert.modal('open');
        }
    });
});
</script>
{/block}
